<div class="p-3 bg-white">
  <h1 class="h3 m-0">Aside demo</h1>
</div>

<div class="p-3">
  <button type="button" class="btn btn-secondary rounded" data-toggle="modal" data-target="#left">Left</button>
  <button type="button" class="btn btn-secondary rounded" data-toggle="modal" data-target="#right">Right</button>
  <button type="button" class="btn btn-secondary rounded" data-toggle="modal" data-target="#top">Top</button>
  <button type="button" class="btn btn-secondary rounded" data-toggle="modal" data-target="#bottom">Bottom</button>
</div>

<!-- left -->
<div class="modal fade inactive" id="left" data-backdrop='false'>
  <div class="left bg-white br-l" style='width:250px'>

    <div class='p-3 py-3 bb-l'>
      <a class='close' data-dismiss="modal"><i class='fa fa-times'></i></a>
      <h3 class='m-0'>Members</h3>
    </div>

    <div>
      <a class="d-flex pt-2 px-3">
        <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
        <div class="grow bb-eee pb-2">
          <div>Jonh sall</div>
          <div class="text-muted">designer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
        <div class="grow bb-eee pb-2">
          <div>Buk Jon</div>
          <div class="text-muted">ux developer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-danger text-white font-weight-bold">T</span>
        <div class="grow bb-eee pb-2">
          <div>Tide Humor</div>
          <div class="text-muted">programmer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-success text-white font-weight-bold">S</span>
        <div class="grow bb-eee pb-2">
          <div>Steve Gate</div>
          <div class="text-muted">js ninja</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
        <div class="grow bb-eee pb-2">
          <div>Jonh sall</div>
          <div class="text-muted">designer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-info text-white font-weight-bold">H</span>
        <div class="grow bb-eee pb-2">
          <div>Suppo Hugo</div>
          <div class="text-muted">script kiddie</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
        <div class="grow bb-eee pb-2">
          <div>Buk Jon</div>
          <div class="text-muted">ux developer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-danger text-white font-weight-bold">C</span>
        <div class="grow bb-eee pb-2">
          <div>Tide Humor</div>
          <div class="text-muted">programmer</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-success text-white font-weight-bold">Q</span>
        <div class="grow bb-eee pb-2">
          <div>Steve Gate</div>
          <div class="text-muted">js ninja</div>
        </div>
      </a>
      <a class="d-flex pt-2 px-3">
        <span class="mr-3 thumb rounded bg-info text-white font-weight-bold">P</span>
        <div class="grow bb-eee pb-2">
          <div>Suppo Hugo</div>
          <div class="text-muted">script kiddie</div>
        </div>
      </a>
    </div>
  </div>
</div>

<!-- right -->
<div class="modal fade inactive" id="right" data-backdrop='false'>
  <div class="right bg-white bl-l" style='width:250px;'>
    <div class='p-3 py-3 bb-l'><a class='close' data-dismiss="modal"><i class='fa fa-times'></i></a>
      <h3 class='m-0'>Members</h3></div>
    <div><a class="d-flex pt-2 px-3"> <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
      <div class="grow bb-eee pb-2">
        <div>Jonh sall</div>
        <div class="text-muted">designer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
      <div class="grow bb-eee pb-2">
        <div>Buk Jon</div>
        <div class="text-muted">ux developer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-danger text-white font-weight-bold">T</span>
      <div class="grow bb-eee pb-2">
        <div>Tide Humor</div>
        <div class="text-muted">programmer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-success text-white font-weight-bold">S</span>
      <div class="grow bb-eee pb-2">
        <div>Steve Gate</div>
        <div class="text-muted">js ninja</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
      <div class="grow bb-eee pb-2">
        <div>Jonh sall</div>
        <div class="text-muted">designer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-info text-white font-weight-bold">H</span>
      <div class="grow bb-eee pb-2">
        <div>Suppo Hugo</div>
        <div class="text-muted">script kiddie</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
      <div class="grow bb-eee pb-2">
        <div>Buk Jon</div>
        <div class="text-muted">ux developer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-danger text-white font-weight-bold">C</span>
      <div class="grow bb-eee pb-2">
        <div>Tide Humor</div>
        <div class="text-muted">programmer</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-success text-white font-weight-bold">Q</span>
      <div class="grow bb-eee pb-2">
        <div>Steve Gate</div>
        <div class="text-muted">js ninja</div>
      </div>
    </a> <a class="d-flex pt-2 px-3"> <span class="mr-3 thumb rounded bg-info text-white font-weight-bold">P</span>
      <div class="grow bb-eee pb-2">
        <div>Suppo Hugo</div>
        <div class="text-muted">script kiddie</div>
      </div>
    </a></div>
  </div>
</div>

<!-- top -->
<div class="modal fade" id="top">
  <div class="top bg-white text-center py-3 bb-l"><h3 class='font-thin mb-3'>SHARE NOW</h3>
    <div>
      <button class="btn btn-icon bg-facebook text-white" data-dismiss="modal"><i class="fa fa-facebook fa-2x"></i></button>
      <button class="btn btn-icon bg-twitter text-white" data-dismiss="modal"><i class="fa fa-twitter fa-2x"></i></button>
      <button class="btn btn-icon bg-googleplus text-white" data-dismiss="modal"><i class="fa fa-google fa-2x"></i></button>
      <button class="btn btn-icon bg-linkedin text-white" data-dismiss="modal"><i class="fa fa-linkedin fa-2x"></i></button>
    </div>
  </div>
</div>

<!-- bottom -->
<div class="modal fade" id="bottom">
  <div class="bottom bg-white text-center py-3 bt-l"><h3 class='font-thin mb-3'>SHARE NOW</h3>
    <div>
      <button class="btn btn-icon bg-facebook text-white" data-dismiss="modal"><i class="fa fa-facebook fa-2x"></i></button>
      <button class="btn btn-icon bg-twitter text-white" data-dismiss="modal"><i class="fa fa-twitter fa-2x"></i></button>
      <button class="btn btn-icon bg-googleplus text-white" data-dismiss="modal"><i class="fa fa-google fa-2x"></i></button>
      <button class="btn btn-icon bg-linkedin text-white" data-dismiss="modal"><i class="fa fa-linkedin fa-2x"></i></button>
    </div>
  </div>
</div>